import { type } from '../../../../types/auto-imports';
<template>
  <view class="page-wrap">
    <!-- Header -->
    <c-nav-bar
      title="首页"
      type="white"
    />

    <!-- Content -->
    <view class="pb-20">
      <!-- Banner -->
      <view class="relative h-48 w-full">
        <image
          src="/static/images/banner/banner1.png"
          mode="aspectFill"
          class="h-full w-full"
        />
      </view>

      <!-- Greeting -->
      <view class="px-4 py-4">
        <text class="text-lg text-gray-700">
          hi, 谢之遥
        </text>
      </view>

      <!-- Welcome Services  -->
      <view class="mb-6 px-4">
        <view class="mb-4 flex items-center">
          <view class="mr-2 h-4 w-1 rounded bg-red-500 shadow-lg" />
          <text class="text-base font-medium">
            迎新服务
          </text>
        </view>

        <view class="grid grid-cols-2 gap-4">
          <view
            class="flex items-center justify-around rounded-lg bg-white p-4 shadow-lg"
            @click="navigateTo('guide')"
          >
            <view>
              <text class="mb-1 block text-base font-medium">
                迎新指南
              </text>
              <text class="text-xs text-gray-500">
                入学安排便捷查
              </text>
            </view>
            <u-icon
              name="/static/svg/home/zhi-nan.svg"
              color="#3498db"
              size="24"
            />
          </view>

          <view
            class="flex items-center justify-around rounded-lg bg-white p-4 shadow-lg"
            @click="navigateTo('notice')"
          >
            <view>
              <text class="mb-1 block text-base font-medium">
                温馨提示
              </text>
              <text class="text-xs text-gray-500">
                入学资料早准备
              </text>
            </view>
            <u-icon
              name="bell"
              color="#f39c12"
              size="24"
            />
          </view>
        </view>
      </view>

      <!-- Application Services -->
      <view class="px-4">
        <view class="mb-4 flex items-center">
          <view class="mr-2 h-4 w-1 rounded bg-red-500" />
          <text class="text-base font-medium">
            应用服务
          </text>
        </view>

        <view class="grid grid-cols-2 gap-4">
          <view
            class="flex items-center justify-around rounded-lg bg-white p-4 shadow-lg"
            @click="navigateTo('registration')"
          >
            <view>
              <text class="mb-1 block text-base font-medium">
                学籍注册
              </text>
              <text class="text-xs text-gray-500">
                迎新报到到服务
              </text>
            </view>
            <u-icon
              name="file-text"
              color="#2ecc71"
              size="24"
            />
          </view>

          <view
            class="flex items-center justify-around rounded-lg bg-white p-4 shadow-lg"
            @click="navigateTo('info')"
          >
            <view>
              <text class="mb-1 block text-base font-medium">
                信息查询
              </text>
              <text class="text-xs text-gray-500">
                班级宿舍学号知晓
              </text>
            </view>
            <u-icon
              name="search"
              color="#9b59b6"
              size="24"
            />
          </view>

          <view
            class="flex items-center justify-around rounded-lg bg-white p-4 shadow-lg"
            @click="navigateTo('special')"
          >
            <view>
              <text class="mb-1 block text-base font-medium">
                特殊体质上报
              </text>
              <text class="text-xs text-gray-500">
                特殊体质注册服务
              </text>
            </view>
            <u-icon
              name="/static/svg/home/ti-zhi.svg"
              color="#e74c3c"
              size="24"
            />
          </view>

          <view
            class="flex items-center justify-around rounded-lg bg-white p-4 shadow-lg"
            @click="navigateTo('walkout')"
          >
            <view>
              <text class="mb-1 block text-base font-medium">
                走读申请
              </text>
              <text class="text-xs text-gray-500">
                走读条件要符合
              </text>
            </view>
            <u-icon
              name="/static/svg/home/zou-du.svg"
              color="#1abc9c"
              size="24"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const navigateTo = (page) => {
  const routes = {
    // guide: '/pages/welcome/guide',
    // notice: '/pages/welcome/notice',
    // registration: '/pages/services/registration',
    // info: '/pages/services/info',
    special: '/pages/biz/special/agreement1',
    // walkout: '/pages/services/walkout',
  };

  const url = routes[page];
  if (url) {
    uni.navigateTo({
      url: routes[page],
    });
  }
};
</script>

<style>
:deep(.u-navbar) {
  border-bottom: 1px solid #f0f0f0;
}
</style>
